<template>
  <div class="organization-list-container">
    <div class="local-name">
      组织列表
    </div>
    <div class="table-data">
      <el-table
        size="small"
        :data="tableData"
        border
        stripe
        row-key="id"
        default-expand-all="true"
        class="table"
      >
        <el-table-column
          label="组织"
          prop="name"
        >
          <template slot-scope="scope">
            <el-input
              size="small"
              type="text"
              class="table-input"
              v-if="scope.row.name!=='system'&&userGuardList.includes(guard.OrganizationManage)"
              placeholder="请输入组织名称"
              v-model="scope.row.name"
              @focus="setOrganization(scope.row.name,scope.row.description)"
              @blur="updateOrganization(scope.row)"
              @keyup.enter.native="blur"
            />
            <span v-else>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="描述"
          prop="description"
        >
          <template slot-scope="scope">
            <el-input
              size="small"
              type="text"
              v-if="scope.row.name!=='system'&&userGuardList.includes(guard.OrganizationManage)"
              v-model="scope.row.description"
              placeholder="请输入组织描述"
              @focus="setOrganization(scope.row.name,scope.row.description)"
              @blur="updateOrganization(scope.row)"
              @keyup.enter.native="blur"
            />
            <span v-else>{{ scope.row.description }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          v-if="userGuardList.includes(guard.OrganizationManage)"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="append(scope.row)"
              size="small"
            >添加子组织</el-button>
            <el-button
              size="small"
              v-if="scope.row.name!=='system'"
              type="text"
              class="table-button-delete"
              @click="deleteOrganization(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import { SortType } from '../../../constants/common';
import { createOrganizationTempApi, deleteOrganizationApi, getOrganizationListApi, updateOrganizationBatchApi, updateOrganizationApi } from '../../../api/organization';
import { Message, MessageBox } from 'element-ui';
import { parseError, parseTime } from '../../../utils';
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      tableData: [],
      totalCount: 0,
      sort: {
        sortType: SortType.DESC,
        orderBy: 'createdAt'
      },
      editedNodeId: null,
      btnLoading: false,
      oldOrganization: null
    };
  },
  created() {
    this.search();
  },
  methods: {
    search() {
      getOrganizationListApi(this.currentPage - 1, this.pageSize, this.sort.sortType, this.sort.orderBy)
        .then(res => {
          this.tableData = [res];
        })
        .catch(error => Message.error(error));
    },
    setOrganizationName(data) {
      data.forEach(item => {
        item.label = item.name;
        if (item.children && item.children.length > 0) this.setOrganizationName(item.children);
      });
    },
    append(data) {
      createOrganizationTempApi(data.id)
        .then(res => {
          const newChild = { id: res.id, label: '', name: '', children: [] };
          if (!data.children) {
            this.$set(data, 'children', []);
          }
          data.children.push(newChild);
        })
        .catch(error => Message.error(parseError(error)));
    },
    edit(data) {
      this.editedNodeId = data.id;
    },
    update() {
      MessageBox.confirm('是否确认更新', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.btnLoading = true;
          updateOrganizationBatchApi(...this.tableData)
            .then(res => {
              Message.success('更新成功');
            })
            .catch(error => Message.error(parseError(error)))
            .finally(() => (this.btnLoading = false));
        })
        .catch(() => {});
    },
    createOrganization(scope) {
      createOrganizationApi(scope.data.id);
    },
    setOrganization(name, description) {
      this.oldOrganization = { name, description };
    },
    updateOrganization(data) {
      if (data.name === this.oldOrganization.name && data.description === this.oldOrganization.description) return;
      updateOrganizationApi(data.id, data.name, data.description)
        .then(res => Message.success('修改组织成功'))
        .catch(error => Message.error(parseError(error)));
    },
    blur(e) {
      e.target.blur();
    },
    deleteOrganization(data) {
      MessageBox.confirm(`是否确认删除${data.name}吗？`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteOrganizationApi(data.id)
            .then(res => {
              this.search();
              Message.success('删除组织成功');
            })
            .catch(error => Message.error(parseError(error)));
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.organization-list-container {
  .table-data {
    background-color: #fff;
    padding: 10px;
  }
  padding: 10px;
  // width: 800px;
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .table {
    &-input {
      width: 200px;
    }
    &-button {
      &-delete {
        color: #ff0000;
      }
    }
  }
  .local-name {
    padding: 0 10px 10px 10px;
    font-size: 24px;
    font-weight: 800;
    .el-button--primary {
      float: right;
      background-color: #2c83b1 !important;
      border-color: #2c83b1 !important;
    }
  }
}
</style>
